<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css?v=1.0">
    <link rel="stylesheet" href="css/index.css?v=1.0">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/flexible.js?v=1.0"></script>
    <script src="layer-mobile/layer.js?v=1.0"></script>
</head>

<body style="background:#1d1721">
    <div class="home-top">
        <div class="yun-drill">当前算力：
            <span class="yun-num">0</span>
            <a href="javascript:;" class="rule">空投规则</a>
        </div>
        <div class="meg-view">
            <ul class="meg-list">
                <li></li>
            </ul>
        </div>
        <div class="count-down">

        </div>
        <div class="token">

        </div>
        <div class="wallter-btn">
            <a href="wallet.html" id="wallter">
                <img src="image/wallet.png" class="pic-img" /> 钱包</a>
        </div>
        <div class="invite-btn">
            <a href="./invite.html" id="invite">
                <img src="image/invite.png" class="pic-img" /> 邀请好友</a>
        </div>
    </div>

    <div class="index-list">

    </div>
    <footer class="footer">
        <a class="space" id="wrill">
            <img src="image/base-h.png" class="space-img">
            <span class="space-color">我的空投</span>
        </a>

        <a href="user.html" class="space" id="user">
            <img src="image/personal.png" class="space-img">
            <span>我的基地</span>
        </a>
    </footer>
</body>

</html>
<script type="text/javascript">
    $(function () {

        var userid = getUserId(); //获取userid
        $ajax(
            url + 'getHomeInfo.ashx',
            'get', {
                userid: userid
            },
            function (data) {

                var res = '',
                    advres = '',
                    message = data.data.announcement, //公告集合
                    adver = data.data.advertList, //空投项目预约列表
                    credits = data.data.currentChargeCredits; //可收集云钻列表

                if (adver.length > 0) {

                    for (var i = 0, iL = adver.length; i < iL; i++) {
                        advres += '<a href=' + adver[i].advertPageUrl + ' class="adv"><img src=' + adver[i]
                            .advertPicUrl + '></a>'
                    }

                    $('.index-list').html(advres);
                }

                if (message.length > 0) {

                    for (var i = 0, iL = message.length; i < iL; i++) {
                        res += '<a href="javascript:;">' + message[i].title + '</a>'

                    }
                    $('.meg-list li').append(res);
                    var _width = $('.meg-list li').width();

                    var css = {
                        left: -_width + 300
                    };
                    $('.meg-list li').animate(css, _width * 15, 'linear', rowBack)


                    function rowBack() {

                        $('.meg-list li').css('left', 0);

                        $('.meg-list li').animate(css, _width * 15, 'linear', rowBack)

                    }

                }

                if (userid == null) { //未登录

                    $('.count-down').html(
                        '<span class="count-time"><img src="image/bubble-win.png" ><p><a href="/login.html">登录</a> / <a href="/register.html">注册</a></p>'
                    )


                } else { //已登录

                    $('.yun-num').html(data.data.knowledge); //显示算力

                    if (data.data.chargeTime == '') { //云钻倒计时结束(可收钻)

                        $('.count-down').empty(); //倒计时隐藏
                        $('.token').css('z-index', '0');

                        var strB = '';
                        if (credits.length > 0) {
                            for (var i = 0, iL = credits.length; i < iL; i++) {

                                strB += '<p class="b-wrill">' +
                                    '<span class="b-pic" style="color:' + credits[i].colorHex +
                                    '" data-id="' + credits[i].id + '">' + credits[i].currencyCode +
                                    '</span>' +
                                    '<span class="b-num" style="color:' + credits[i].colorHex + '">' +
                                    credits[i].value + '</span>' +
                                    '</p>';

                            }

                            $('.token').append(strB);

                            //云钻上下抖动
                            /* var class_top = { marginTop: '20px' };
                            $('.b-wrill').animate(class_top, 1000, 'linear', topBack);
                            function topBack() {

                            		if (class_top.marginTop == '20px') {
                            				class_top.marginTop = '-20px';
                            		} else if (class_top.marginTop == '-20px') {
                            				class_top.marginTop = '20px';
                            		}
                            		$('.b-wrill').animate(class_top, 1000, 'linear', topBack);
                            } */

                            for (var i = 0, iL = credits.length; i < iL; i++) {

                                $('.b-wrill').eq(i).css({
                                    left: radomNu(1, 8.2) + 'rem',
                                    top: radomNu(1, 6.5) + 'rem'
                                });

                                for (var k = 0; k < i; k++) {

                                    ~ function fn() {

                                        if ((Math.abs(parseInt($('.b-wrill').eq(i).css('left')) - parseInt(
                                                $('.b-wrill').eq(k).css('left')))) < 70) {

                                            $('.b-wrill').eq(k).css({
                                                left: radomNu(0, 8.2) + 'rem'
                                            });
                                            requestAnimationFrame(fn);

                                        } else if ((Math.abs(parseInt($('.b-wrill').eq(i).css('top')) -
                                                parseInt($('.b-wrill').eq(k).css('top')))) < 100) {

                                            $('.b-wrill').eq(k).css({
                                                top: radomNu(0, 6.5) + 'rem'
                                            });
                                            requestAnimationFrame(fn);
                                        }
                                    }()

                                }

                            }

                        }

                    } else { //倒计时不可收钻

                        $('.count-down').html(
                            '<span class="count-time"><i id="time"></i> 后可收取</span><img src="image/bubble-win.png" ><p>正在生长中</p>'
                        )

                        var time = document.getElementById('time');
                        countDown(data.data.chargeTime, time);
                    }


                }

            },
            function (data) {

                loginRes();
            }
        )

        var creditid;
        $('.token').click(function (e) { //事件委托

            e = e || window.event;
            var target = e.target || e.srcElement; //兼容IE

            if (target.parentNode.tagName.toLowerCase() == 'p') {
                getAudio(); //收钻音频;
                creditid = $(target.parentNode).find('.b-pic').attr('data-id'); //获取creditid

                $ajax(
                    url + 'chargeCredits.ashx',
                    'post', {
                        userid: userid,
                        creditid: creditid
                    },
                    function (data) {
                        //点击效果
                        doMove($(target.parentNode)[0], 'top', 8, -300, function () { //上升后删除节点
                            $(target.parentNode)[0].remove();

                            if (!$('.token').children()[0]) {
                                location.reload();
                            }

                        });

                    },
                    function (data) {

                        layer.open({
                            content: data.msg,
                            skin: 'msg',
                            time: 2
                        });

                        if (data.code == 201 || data.code == 202) {
                            loginRes();
                        }

                    }
                )
            }

        })

    })
</script>
